module.exports = {
  important: '#app',
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: theme => ({
        
      }),
      backgroundColor: theme => ({
        ...theme('colors'),
        'white-opacity': 'rgba(255,255,255,.5)',
        'black-opacity': 'rgba(0,0,0,.8)',
        'black-opacity-btn': 'rgba(0,0,0,.6)'
      }),
      transitionProperty: {
        'width': 'width',
        'spacing': 'margin, padding',
      },
      width: {
        '9/10': '90%',
        '30': '7.5rem',
        '95/100': '95%'
      },
      top: {
        '-12': '-12rem'
      },

      rotate: {
        '-3': '-3deg',
        // '-6': '-6deg',
        '-10': '-10deg'
      },
      minHeight: {
        '24': '6rem'
      },
      flex: {
        '1.5': '1.5 1.5 0%',
        '2': '2 2 0%',
        '3': '3 3 0%',
        '4': '4 4 0%',
        '5': '5 5 0%'
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}